<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表达式小结</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <h2>JSX 的小测验</h2>
    <div id="root"></div>

    <script type="text/babel">
      //声明虚拟 DOM 对象
      //声明一个变量
      var value = '';
      // string  number  boolean  undefined  null  symbol  object
      // 首字母
      // s   n   b   u n   s  o
      // 去重
      // s n b u o
      // 排列组合
      // usonb  


      //测试标签子元素的值
      //布尔类型
      // var value = true; // 不渲染
      // var value = false; // 不渲染
      //字符串
      // var value = '逸一时，误一世';// 渲染 ✅
      //symbol
      // var value = Symbol(); // 不渲染   
      //对象
      // var value = {name: '周淑怡'};//❌ 
      //null
      // var value = null;//不渲染
      //number
      // var value = 521; //渲染 ✅
      // var value = 0o777;// 0o 8进制  0x 16 进制  0b 二进制
      //undefined
      // var value = undefined; //不渲染
      //虚拟 DOM 对象 //渲染 ✅
      // var value = React.createElement('h1', null, '牵着你手的时候，世界属于我');
      // var value = <h2>你为了你的正义，我为了我的正义</h2>;
      //数组
      // var value = ['a','b','c', false, null, 123, <p>test</p>];

      //测试标签属性值  usonb
      // var value = '';
      // var value = undefined;//不渲染
      // var value = 'iloveyou'; // ✅
      // var value = '';
      // var value = Symbol(); //不渲染
      // var value = {a: 100};// 这里不会报错, 会渲染为 title="[object Object]"
      // var value = 369; //// ✅
      // var value = null;// 不渲染
      // var value = true;// // 不渲染
      // var value = false;// 不渲染
      // let vdom = <div title={value}>测试属性值</div>;

      //插值语法大括号中能写什么?  JS 表达式
      //字面量
      // let vdom = <h2>{'love'}</h2>
      //变量
      // var value = 'test';
      //对象属性  
      // var obj = {
      //   name: '超级小桀',
      //   age: 28
      // };
      //运算
      // let vdom = <h2>{20 + 45}</h2>;
      // let vdom = <h2>{5 || 8}</h2>;
      // let vdom = <h2>{0 || 9}</h2>;
      //函数调用   indexOf
      let vdom = <h2>{'abc'.toUpperCase()}</h2>;
      
      ReactDOM.render(vdom, document.querySelector('#root'));
    </script>
  </body>
</html>
